<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			
			#height,#weight{
				width: 200px;
				height: 30px;
				outline: none;
				border: none;
				border-radius: 5px;
				background-color: lightskyblue;
			}
			.inputItem{
				display: flex;
				margin: 5px 0;
				
			}
			.inputItem label{
				flex: 1;
			}
			.inputItem input{
				flex: 3;
			}
		</style>
	</head>
	<body>
		<h1 align="center">BIM测试</h1>
		<div class="inputItem">
			<label>身高：(cm)</label>
			<input type="number" name="height" id="height" placeholder="请输入您的身高" value="" />
		</div>
		<div class="inputItem">
			<label>体重：(kg)</label>
			<input type="number" name="weight" id="weight" placeholder="请输入您的体重" value="" />
		</div>
		<button type="button" onclick="test()">评测BIM值</button>
		
		<h3 id="result"></h3>
		<h3 id="state"></h3>
		
		<script type="text/javascript">
			// 设置一个函数，对我们点击之后要执行的代码进行封装
			function test(){
				console.log("当点击的时候会执行test函数内部的代码")
				// 首先需要先找到输入框
				var heightInput = document.querySelector("#height")
				/* 获取输入框的值 */
				var height = heightInput.value;
				// 首先获取体重的输入框元素
				var weightInput = document.querySelector("#weight")
				// 获取元素的值，value
				var weight = weightInput.value
				console.log(height)
				console.log(weight)
				// 将height从cm转成m的单位
				height = height/100
				
				// 将身高和体重根据公式计算出BIM值
				var BIM = weight/(height*height)
				console.log(BIM)
				// 获取显示结果的h1元素
				var resultInput = document.querySelector("#result")
				resultInput.innerHTML = "BIM的评测结果是："+ BIM
				
				var stateH1 = document.querySelector("#state")
				// 根据条件判断显示什么内容
				if(BIM>30){
					stateH1.innerHTML = "健康情况：超胖"
				}else if(BIM>25&&BIM<=30){
					stateH1.innerHTML = "健康情况：偏胖"
				}else if(BIM>18.5&&BIM<=25){
					stateH1.innerHTML = "健康情况：正常"
				}else{
					stateH1.innerHTML = "健康情况：偏瘦"
				}
				
			}
		</script>
	</body>
</html>
